<template>
	<view class="main card_b">
		<view class="f18" style="margin-bottom: 20rpx;">
			常订餐食前十
		</view>
		<view class="">
			<view class="">
				<u-row>
					<u-col span="3">
						<view class="f18"  style="margin-bottom: 20rpx;">
							排行
						</view>
					</u-col>
					<u-col span="2">
						<view class="f18"  style="margin-bottom: 20rpx;">
							套餐
						</view>
					</u-col>
					<u-col span="4">
						<view class="f18"  style="margin-bottom: 20rpx;">
							菜品
						</view>
					</u-col>
					<u-col span="3">
						<view class="f18"  style="margin-bottom: 20rpx;">
							订餐数量
						</view>
					</u-col>
				</u-row>
			</view>
			<u-row v-for="(item,index) in data">
				<u-col span="3" >
					<view class="ranking f18"  style="margin-bottom: 20rpx;">
						<image v-if="index == 0" class="img" src="@/static/images/icons/t_1.png" mode="">
						</image>
						<image v-else-if="index == 1" class="img" src="@/static/images/icons/t_2.png" mode="">
						</image>
						<image v-else-if="index == 2" class="img" src="@/static/images/icons/t_3.png" mode="">
						</image>
						<view v-else class="index_b">
							{{index+1}}
						</view>
					</view>
				</u-col>
				<u-col span="2">
					<view class="combo "  style="margin-bottom: 20rpx;">
						<view class="f18" v-if="item.foodId">
							{{item.foodName}}
						</view>
						<view class="f18" v-else>
							{{item.comboName}}
						</view>
					</view>
				</u-col>
				<u-col span="4">
					<view class="combo ellipsis f18" style="margin-bottom: 20rpx;" v-if="item.dishName" @click="togolChange(item)">
						<view class="ellipsis">
							{{item.dishName}}
						</view>
					</view>
				</u-col>
				<u-col span="3">
					<view class="num f18"  style="margin-bottom: 20rpx;">
						{{item.totalSaleNum}}
					</view>
				</u-col>
			</u-row>
		</view>
			<uni-popup ref="comboPopup" type="bottom" class="">
					<comboDetailsView ref="comboDetailsView" v-if="comboId" @closePopup="closePopup" :comboId="comboId"
						:showShopping="false" />
				</uni-popup>
		<!-- <u-modal :show="show" :content="'当前套餐: '+title +'     菜品: '+content" @confirm="show=false"
			@close="show=false"></u-modal> -->
	</view>
</template>

<script>
	import {
		listData,
	} from "@/api/system/dict/data"
	import comboDetailsView from '@/components/common/comboDetailsView.vue'
	export default {
		components: {
			comboDetailsView
		},
		props: {
			data: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				show: false,
				content: "",
				title: "",
				comboId: '',
				tableColumn: [],
				tableCuisine: []

			}
		},
		created() {
			this.dictdata()
		},
		methods: {
			async dictdata() {
				const res = await listData({
					dictType: "combo_column",
					pageSize: 99,
					pageNum: 1
				})

				const data = await listData({
					dictType: "cuisine_column",
					pageSize: 99,
					pageNum: 1
				})
				console.log(res)

				const T = JSON.parse(JSON.stringify(res.rows));
				const S = JSON.parse(JSON.stringify(data.rows));
				this.tableColumn = T;
				this.tableCuisine = S;
			},
			closePopup() {
				// console.log('closePopup');
				this.$refs.comboPopup.close()
				this.comboId = null
			},
			togolChange(item) {
				const tableColumn = this.tableColumn.filter(item => item.dictValue == 1)
				const tableCuisine = this.tableColumn.filter(item => item.dictValue == 1)
				console.log('点击了', item, this.comboId)
				this.comboId = item.comboId
				this.$nextTick(() => {
					console.log('打印', this.$refs.comboDetailsView)
					this.$refs.comboDetailsView.getComboDetail()
					this.$refs.comboDetailsView.tableColumn = tableColumn
					this.$refs.comboDetailsView.tableCuisine = tableCuisine
					this.$refs.comboPopup.open()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {

		.th,
		.td {
			line-height: 70rpx;
			height: 70rpx;
			// text-align: center;
		}

		.ranking {
			width: 220rpx;

			.index_b {
				padding-left: 14rpx;
			}

			.img {
				width: 40rpx;
				height: 48rpx;
			}
		}

		.combo {
			flex: 1;
		}

		.num {
			width: 120rpx;
		}
	}
</style>